<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>写日记</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layer/layui.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/menu/write_diary.css}">
    <style>
        .label-selected {
            width: 100%;
            min-height: 180px;
            margin: 0;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 5px;
            overflow-y: auto;
        }

        .label-selected .label-item.active {
            border: 1px solid #1E9FFF;
            color: #367dff;
        }

        .label-selected .label-item .menu-item-icon {
            margin-right: 5px;
        }

        .label-selected .label-item {
            margin: 0 5px 5px 0;
            float: left;
            user-select: none;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="article" class="form-horizontal" style="margin-top: 15px;">
        <input type="hidden" name="roleKey"/>
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="name">名称：</label>
                <div class="col-sm-10">
                    <input type="text" autocomplete="off" name="name" id="name" class="form-control" placeholder="请输入名称"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="code">编码：</label>
                <div class="col-sm-10">
                    <input class="form-control" id="code" autocomplete="off" name="code" placeholder="请输入编码"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">权限：</label>
                <div class="col-sm-10">
                    <div class="wrap">
                        <div class="label-selected">
                            <input type="hidden" name="perms">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" onclick="submitFrom()" class="btn btn-primary"><i
                            class="fa fa-check pdr5" aria-hidden="true"></i>确定
                    </button>
                    <button type="button" onclick="cancel()" class="btn btn-success">
                        <i class="fa fa-times pdr5"
                           aria-hidden="true"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script th:src="@{/bootstrap/js/jquery.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<!--bootstrap.min.js-->
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script>
    var isEdit = false;

    function init(data) {
        if (data.opt === 'edit') {
            $("input[name='roleKey']").val(data.row.roleKey);
            $("input[name='name']").val(data.row.name);
            $("input[name='code']").val(data.row.code);
            loadPerm(data.row.rolePerm, data.relation);
        } else {
            loadPerm(false, data.relation);
        }
    }

    /**
     * 加载角色列表
     */
    function loadPerm(perms, relation) {
        let labelHTML = '', hasRole = [], $rolePerm = $("input[name='perms']");
        if (perms) {
            for (let i = 0; i < perms.length; i++) {
                let v = perms[i];
                hasRole.push(v.permKey + '');
            }
        }
        let rolePerm = $rolePerm.val();
        for (let i = 0; i < relation.length; i++) {
            let v = relation[i], active = '';
            if (hasRole.indexOf(v.permKey + '') !== -1) {
                active = 'active';
                rolePerm += v.permKey + ',';
            }
            labelHTML += '<li class="label-item ' + active + '" data="' + v.permKey + '">' +
                '<i class="menu-item-icon fa fa-key fa-tags" >' +
                '</i>' + v.name + '</li>';
        }
        $rolePerm.val(rolePerm.substr(0, rolePerm.length - 1));
        $(".label-selected").append(labelHTML);
    }

    /**
     * 选中
     * @type {string}
     */
    let val = "";
    $(".label-selected").on("click", "li", function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active')
        } else {
            $(this).addClass('active');
        }
        val = '';
        let $selected = $(".label-selected").children("li.active");
        for (let i = 0; i < $selected.length; i++) {
            val += $(".label-selected").children("li.active").eq(i).attr("data") + ',';
        }
        if (val !== '') {
            val = val.substr(0, val.length - 1);
        }
        $("input[name='perms']").val(val);
    });


    /**
     * 提交表单
     */
    function submitFrom() {
        let data = $('#article').serialize();
        //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
        let formData = JSONUtil.serializeFormToJson(data);
        let url = "sys/manage/addOrUpdateRole";
        ajaxPost(url, formData, function () {
            layer.load(1);
        }, function (result) {
            if (result.code === 200) {
                layer.closeAll('loading');
                parent.editSuccessCallback(formData);
                cancel();
            } else {
                layer.closeAll('loading');
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.closeAll('loading');
            layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
        });
    }

    function cancel() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }


</script>
</html>